<template>
  <el-dialog title="说明" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="1000px">
    <div class="ant-modal-body">
      <div class="wrap___1jsaD">
        <div class="summary___2ADLo"><img src="//s.yezgea02.com/common/QeXzOK.png" alt="" class="icon___1w3Ln">
          <div>
            <div class="title___oRZDT">生命周期标签</div>
            <div class="desc___3JIZW">根据客户的企微标签变更情况，自动生成的生命周期标签体系<br>可根据业务设置多个生命周期阶段进行管理，支持识别企微标签及智能标签变更，自动打上生命周期标签</div>
          </div>
        </div>
        <div class="demo___Go2yJ">
          <div class="title___oRZDT">场景示例：客户生命周期</div>
          <div class="desc___3JIZW">可根据业务需求，按客户已经有的标签情况，匹配生命周期标签规则，为客户自动打上新的标签</div>
          <img src="//s.yezgea02.com/common/WECUqx.png" alt="" class="step___dz77M">
          <div class="example___2V-5-">例如：<br>某一项业务根据阶段不同设置为：潜在客户、意向客户、付费客户<br>当在沟通过程中在聊天侧边栏或者其他地方打上已付款标签时，可自动将该客户打上新的标签：付费用户</div>
          <span class="ant-tag ant-tag-has-color figure-title___14lsz" style="background-color: rgb(255, 230, 229);">功能界面</span><img src="//s.yezgea02.com/common/Kq4ezu.png" alt="" class="figure___5sm8y"></div>
      </div>
    </div>

    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'labelTips',
  components: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  watch: {},

  methods: {
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
      this.$emit('getFriendInfo', {})//把值传给父级
    }
  }
}
</script>

<style scoped lang="scss">
.wrap___1jsaD {
  width: 100%;
}

.summary___2ADLo {
  display: flex;
  align-items: flex-start;
  grid-gap: 12px;
  gap: 12px;
}

.summary___2ADLo .title___oRZDT {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
}

.summary___2ADLo .desc___3JIZW {
  margin-top: 2px;
  color: rgba(0, 0, 0, .45);
}

.demo___Go2yJ {
  margin-top: 20px;
  border-top: 1px solid #e9e9e9;
}

img {
  max-width: 100%;
}

.summary___2ADLo .icon___1w3Ln {
  width: 56px;
  height: 56px;
}

::v-deep .summary___2ADLo .icon___1w3Ln {
  width: 56px;
  height: 56px;
}

::v-deep .el-dialog__body {
  max-height: 600px;
  overflow-y: auto;
}

.summary___2ADLo {
  display: flex;
  align-items: flex-start;
  grid-gap: 12px;
  gap: 12px;
}

.demo___Go2yJ {
  margin-top: 20px;
  border-top: 1px solid #e9e9e9;
}

.demo___Go2yJ .title___oRZDT {
  margin-top: 20px;
  font-size: 20px;
  color: #00c270;
}

.demo___Go2yJ .desc___3JIZW {
  margin-top: 4px;
  color: rgba(0, 0, 0, .45);
  margin-bottom: 10px;
}

.demo___Go2yJ .figure-title___14lsz {
  margin-top: 12px;
  color: rgba(0, 0, 0, .85);
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 10px;
}

.footer-btn {
  display: flex;
  justify-content: flex-end;
}
</style>
